<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>酷Q状态</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
  .footer {
    text-align: center;
    padding-top: 16px;
    width: 100%;
    height: 50px;
  }
  .wname {
    font-size:16px;
  }
  .label-status {
    margin-right: 5px;
  }
  .check>tbody>tr>td {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .check th {
    text-align: center;
  }
  .check .center {
    text-align: center;
    vertical-align: middle;
  }
  .check .sertitle {
    vertical-align: middle;
  }
  .status-success {
    color: #5cb85c
  }
  .status-warning {
    color: #f0ad4e
  }
  .status-danger {
    color: #d9534f
  }
  #server-container {
    border-bottom: 1px solid #ddd;
  }
  .barl > td {
    border-top: none !important;
    padding: 0 !important;
  }
  .barl .progress {
    margin:0;
    border-radius:0;
    height: 8px;
    box-shadow: none;
  }
  .barl .progress .progress-bar {
    box-shadow: none;
    opacity: 0.7;
  }
  .barl .progress .progress-bar:hover {
    opacity: 1;
  }
  .barl .progress .progress-bar-default {
    background-color: #EFEFEF;
  }
  .progress .tooltip .tooltip-inner .ttime {
    color: #A3A3A3;
    font-size: 11px;
  }
  .credit {
    font-size: 12px;
    color: #BBB;
  }
  .credit a {
    color: #999;
  }
  .credit .pipe {
    padding-left: 6px;
    padding-right: 6px;
    color: #DDD;
  }
  </style>
</head>
<body>
  <div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">切换导航</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="./">酷Q状态</a>
          </div>
          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
              <li><a href="https://cqp.cc/">首页</a></li>
              <li><a href="https://cqp.cc/forum.php">社区</a></li>
              <li><a href="https://cqp.cc/b/app">应用</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1">
        <div id="stattip-err" class="alert alert-warning hide" role="alert">
          <b>当前状态：</b>酷Q部分服务发生异常，我们将尽快修复。
        </div>
        <div id="stattip-ok" class="alert alert-success hide" role="alert">
          <b>当前状态：</b>酷Q所有服务正常运行中，没有发现异常。
        </div>
        <div id="stattip-load" class="alert alert-info" role="alert">
          <b>当前状态：</b>正在检测运行状态，请稍候..
        </div>
        <div class="table-responsive">
          <table class="table table-hover check">
            <thead>
              <tr id="server-title">
              </tr>
            </thead>
            <tbody id="server-container"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="container">
      <p><span class="glyphicon glyphicon-refresh"></span> <span id="last-update"></span></p>
      <p class="credit">Powered by <a href="https://github.com/CoolQ/Cup" target="_blank">Cup</a><span class="pipe">/</span>Based on <a href="https://github.com/digibart/upscuits" target="_blank">Upscuits</a></p>
    </div>
  </div>
  <script type="template/mustache" id="server-template">
    <tr class="{{alert}}">
      <td rowspan="2" class="sertitle">
        <span class="label label-status label-{{label}}"><span class="glyphicon glyphicon-{{statusicon}}"></span> {{statustxt}}</span>
        <span class="wname">{{friendlyname}}</span>
      </td>
      {{#charts}}
      <td class="center">
      <span class="status-{{uptype}} set-tooltip" data-toggle="tooltip" data-placement="top" title="{{uptime}}"><span class="glyphicon glyphicon-{{upsign}}"></span></span>
      </td>
      {{/charts}}
    </tr>
    <tr class="{{alert}} barl">
      <td colspan="8" class="barls">
        <div class="progress">
        {{#progress}}
          <div class="progress-bar progress-bar-{{types}} set-tooltip" style="width: {{len}}%" data-toggle="tooltip" data-placement="top" title="{{stattip}}"></div>
        {{/progress}}
       </div>
      </td>
    </tr>
  </script>
  <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
  <script src="js/mustache.min.js" type="text/javascript"></script>
  <script src="js/config.js" type="text/javascript"></script>
  <script src="js/upscuits.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery(document).ready(myApp.dashboard.init);
  </script>

</body>
</html>
